import { QList } from '@teld/q-components/Item';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { defineComponent, ref } from 'vue';
import Component from '../expansion-item';
import './index.scss';

export default defineComponent({
  name: fixNameSpace('QExpansion'),
  props: {
    ...commonProps,
    ...Component.props,
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props);

    expose(mappingExpose);

    return () => {
      return (
        <QList bordered class={['t-expansion', 'no-outline']} tabindex='-1'>
          {slots}
        </QList>
      );
    };
  },
});
